<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<meta charset="UTF-8">

<div th:fragment="follow">
<div id="follow">
    <script src="http://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin="anonymous"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->

    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="icon" href="../../static/message/img/favicon.ico" type="image/x-icon"/>
    <script src="http://code.jquery.com/jquery-3.4.1.js " integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin=" anonymous "></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js "></script>
    <script src="http://how2j.cn/study/vue.min.js"></script>
    <script src="http://how2j.cn/study/axios.min.js"></script>

    <script src="http://how2j.cn/study/fetch.min.js"></script>
    <!--    一个关注-->

    <div class="follow_list" v-for="(message,index) in messages.data" :key="index" v-model="messages[index]">
        <div class="follow_list_image">

        </div>
        <div class="follow_list_content">
            <a style="font-size: 18px;font-weight: 600;color: inherit;
    text-decoration: none;">{{message.username}}</a>
            <div style="    font-size: 15px;color: #646464;">
                {{message.resume}}
            </div>
            <div style="margin-top: 5px;font-size: 14px;color: #8590a6;">
                <span id="followd">{{message.following}}</span>关注 · <span id="follows">{{message.follows}}</span>关注者
            </div>
        </div>
        <div class="follow_list_button" >
            <button class="btn btn-primary" style="width: 80px" v-if="message.show" @click="toggleShow(index,0)">取消关注</button>
            <button class="btn btn-primary" style="width: 80px" v-if="!message.show" @click="toggleShow(index,1)">关注</button>

        </div>
    </div>
    <!--    一个关注-->
</div>



<script>
    $(function () {


    var username = $.cookie('zhihu');
    var userid = $.cookie('zhihuid');
    // var url = "http://localhost:8080/getMessage?username=" + username;
    var url = "http://localhost:8080/getFollows?id=" + userid;

    new Vue({
        el: '#follow',
        data: {
            messages: [],
            isFollow:'true'
        },
        created: function () {
            autodivheight();

            function autodivheight() { //函数：获取尺寸
                //获取浏览器窗口高度
                var winHeight = 0;
                if (window.innerHeight)
                    winHeight = window.innerHeight;
                else if ((document.body) && (document.body.clientHeight))
                    winHeight = document.body.clientHeight;
                //通过深入Document内部对body进行检测，获取浏览器窗口高度
                if (document.documentElement && document.documentElement.clientHeight)
                    winHeight = document.documentElement.clientHeight;
                //DIV高度为浏览器窗口的高度
                // document.getElementById("message").style.height = winHeight + "px ";
            }

            window.onresize = autodivheight; //浏览器窗口发生变化时同时变化DIV高度

            self = this
            fetch(url).then(function (response) {
                response.json().then(function (jsonObject) {
                    self.messages = jsonObject
                })
            }).catch(function (err) {
                console.log("Fetch错误:" + err);
            });

        },

        methods: {
            toggleShow: function (index,swi) {
                this.messages.data[index].show = !this.messages.data[index].show
                if(swi=="1"){
                    fetch("http://localhost:8080/follow?uid="+userid+"&fid="+this.messages.data[index].fid);
                }
                if(swi=="0"){
                    fetch("http://localhost:8080/removeFollow?uid="+userid+"&fid="+this.messages.data[index].fid);
                }
            }
        },

        mounted: {

        }

    }) });
</script>


<style>
    .follow_list {
        height: 104px;
        width: 694px;
        position: relative;
        padding: 16px 20px;
        -webkit-tap-highlight-color: rgba(26, 26, 26, 0);
    }

    .follow_list_image {
        width: 60px;
        height: 60px;
        float: left;
        background-color: #adcf66;
    }

    .follow_list_content {
        float: left;
        margin-left: 10px;
        width: 500px;
    }
    .follow_list_button{
        float: left;
        padding-top: 19px;
    }
</style>
</div>